<template>
  <div class="personal-merits-box">
    <div v-if="personList.length" class="mertis-box">
      <el-card v-for="item in personList" :key="item.id" shadow="hover" class="mertis-item">
        <div slot="header" class="mertis-item-title">
          {{ item.title || item.name }}
        </div>
        <!-- 内容区 -->
        <div class="mertis-item-result">
          <div class="result-label">考核结果</div>
          <div class="result-value">
            {{ item.scoreLevel }}
          </div>
        </div>
      </el-card>
    </div>
    <Empty v-else />
  </div>
</template>
<script>
import { getPersonMerits } from '@apis/merits.js'
export default {
  name: 'PersonalPerformance',
  data() {
    return {
      personList: [], // 个人绩效考核数据
    }
  },
  created() {
    this.getPersonalMerits()
  },
  methods: {
    getPersonalMerits() {
      const { loginPostInfo = {} } = JSON.parse(localStorage.PSKH_USERINFO)
      getPersonMerits({
        currentPage: 1,
        pageSize: 10,
        param: {
          grainDate: '', // 第几季度
          title: '',
          year: '',
          organId: loginPostInfo.orgId || '',
        },
      }).then(res => {
        const { content = [] } = res.data
        this.personList = content
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.personal-merits-box {
  height: 100%;
  position: relative;
  .mertis-box {
    padding: 5px 30px 20px;
    display: flex;
    flex-wrap: wrap;
    .mertis-item {
      width: calc(50% - 50px);
      margin: 0 15px;
      margin-bottom: 30px;
      border: 1px solid #e4eaf0;
      border-radius: 5px;
      .mertis-item-title {
        font-size: 16px;
        font-weight: 600;
      }
      .mertis-item-result {
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .result-label {
        font-size: 16px;
      }
      .result-value {
        font-size: 20px;
        font-weight: 600;
      }
    }
  }
}
</style>
